<extend name="Public/base"/>

<block name="body">
    <div class="main-title">
        <h2>{$title}</h2>
    </div>
    <form action="" id="form" method="post" enctype="multipart/form-data" class="form-horizontal">
        <div class="form-item">
            <label class="item-label">门店名称<span class="check-tips"></span></label>
            <div class="controls">
                <input name="store_name" class="text input-large" value="{$store.store_name}">
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">门店详细地址<span class="check-tips"></span></label>
            <div class="controls">
                <label class="textarea input-large">
                    <textarea name="address">{$store.address}</textarea>
                </label>
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">地图选址<span class="check-tips">(请将地图缩放至最大再选点，以便提高定位的准确性)</span><span id="map_point" style="margin-left: 33px;">当前选址位置：{$store.map_address}</span></label>
            <!-- 百度地图 -->
            <div id="allmap" style="height:450px;width:750px;"></div>
        </div>
        <!-- 隐藏域 -->
        <div hidden="hidden">
            <input id="province" name="province" value="{$store.province}"/>
            <input id="city" name="city" value="{$store.city}"/>
            <input id="district" name="district" value="{$store.district}"/>
            <input id="lng" name="lng" value="{$store.lng}"/>
            <input id="lat" name="lat" value="{$store.lat}"/>
            <input id="map_address" name="map_address" value="{$store.map_address}"/>
        </div>
        <div class="form-item">
            <label class="item-label">品牌<span class="check-tips"></span></label>
            <div class="controls">
                <select name="brand">
                    <option value="{$store.brand}">{$store.brand}</option>
                    <option value="沃尔玛">沃尔玛</option>
                    <option value="家乐福">家乐福</option>
                    <option value="麦德龙">麦德龙</option>
                    <option value="华润万家">华润万家</option>
                    <option value="卜蜂莲花">卜蜂莲花</option>
                    <option value="万达超市">万达超市</option>
                    <option value="乐天玛特">乐天玛特</option>
                </select>
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">展示图<span class="check-tips">(最大不超过2M，宽高比为16:9，支持 jpg、gif、png、jpeg 格式)</span></label>
            <p><img src="{$store.banner_img_url}" width="270px" height="150px" /></p>
            <input style="margin-bottom: 20px;" type="file" name="file" />
        </div>
        <div class="form-item">
            <input class="btn submit-btn" type="submit" value="确 定"/>
            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
        </div>
    </form>
</block>

<block name="script">
    <link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
    <php>if(C('COLOR_STYLE')=='blue_color') echo '<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php>
    <link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <!-- 引入CSS、JS开始 -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=uON07gKu85D2s6jdUMunWOWvGhKxaeHu"></script>
    <!-- 引入CSS、JS结束 -->
    <script type="text/javascript">
        /* 当前子菜单栏高亮 */
        highlight_subnav('{:U('Activity/store')}');

        // 百度地图API功能
        var map = new BMap.Map("allmap");
        //经纬度误差值
        var lng_tz = 0.000026;
        var lat_tz = 0.00005;

        var p_lng = $("#lng").val();
        var p_lat = $("#lat").val();
        var point = new BMap.Point(p_lng,p_lat);

        map.centerAndZoom(point, 20);
        //map.centerAndZoom('广东省深圳市南山区', 14);

        //默认显示的红点位置
        var p_marker = new BMap.Marker(new BMap.Point(p_lng,p_lat));
        map.addOverlay(p_marker); //增加小红点
        p_marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        map.enableScrollWheelZoom(true);
        map.enableInertialDragging();
        map.enableContinuousZoom();

        //添加控件和比例尺
        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        map.addControl(top_left_navigation);

        //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
        var geoc = new BMap.Geocoder();
        map.addEventListener("click", function(e){
            var pt = e.point;
            geoc.getLocation(pt, function(rs){
                //addressComponents对象可以获取到详细的地址信息
                var addComp = rs.addressComponents;
                var site = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                //将对应的HTML元素设置值
                $("#map_point").html("当前选址位置：" + site);
                $("#map_address").val(site);
                $("#province").val(addComp.province);
                $("#city").val(addComp.city);
                $("#district").val(addComp.district);
//                console.log(site);
            });

            // 地图上增加小红点
            map.clearOverlays();//清除所有覆盖物
            var lng = parseFloat(pt.lng) + lng_tz;
            var lat = parseFloat(pt.lat) - lat_tz;
            var marker = new BMap.Marker(new BMap.Point(lng,lat));
            map.addOverlay(marker); //增加小红点
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            $("#lng").val(lng);
            $("#lat").val(lat);
//            console.log(lng);
//            console.log(lat);
        });

        // 添加城市列表控件
        var size = new BMap.Size(10, 20);
        map.addControl(new BMap.CityListControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: size
        }));
    </script>
</block>